<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
<script>
var map;
google.maps.event.addDomListener(window, "load", function () {
var map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// this is the only add to make the map styled
styles:
[{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]}, {"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#e3e3e3"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"color":"#cccccc"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.airport","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#FFFFFF"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]}]
});
var infoWindow = new google.maps.InfoWindow();
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}
// we need to create two "layers" for each marker, since we're not dealing with something that's a path.
var markerOutsideFilled = createMarker({
position: new google.maps.LatLng(33.808678, -117.928921),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#FFFFFF',
fillOpacity: 1,
scale: 12,
strokeColor: '#7710bf',
strokeWeight: 1
}
});
var markerInsideFilled = createMarker({
position: new google.maps.LatLng(33.808678, -117.928921),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#7710bf',
fillOpacity: 1,
scale: 5,
strokeColor: '#7710bf',
strokeWeight: 4
}
}, "Filled Marker");
var markerOutsideUnfilled = createMarker({
position: new google.maps.LatLng(33.808678, -117.918921),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#FFFFFF',
fillOpacity: 1,
scale: 12,
strokeColor: '#7710bf',
strokeWeight: 1
}
});
var markerInsideUnfilled = createMarker({
position: new google.maps.LatLng(33.808678, -117.918921),
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0,
scale: 5,
strokeColor: '#7710bf',
strokeWeight: 4
}
}, "Unfilled Marker");
});
</script>
#map {
width: 750px;
height: 500px;
}
